import './Scss/SecurityWorkArea.scss'
import { useState, useRef, useEffect } from 'react'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest } from 'ahooks'

import { ColumnConfigA01Template } from './AssetsCharts'
import { FrontModalBox } from '../Modal'

export const SecurityWorkArea001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Data, setData] = useState([])
    const [OptionsCall, setOptionsCall] = useState()

    const style = {
        ColumnColor:
            'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
        ColumnWidth: 16,
        ColumnLegend: false,
        LegendPossion: 'top',
        LegendoffsetY: 10,
        Legendfill: '#B2FBFD',
        LegendfontSize: 12,
        XLine: '#B2FBFD',
        XLabel: '#B2FBFD',
        XTick: '#B2FBFD',
        YTitle: '数量',
        YTColor: '#B2FBFD',
        YPosi: 'end',
        YAuto: true,
        YOffset: 50,
        YColoc: '#B2FBFD',
        YNumber: 5,
        YGrid: 'rgba(155, 253, 255, 0.35)',
        BarStatus: false,
        BarHeight: 8,
        BarWidth: 80,
        BarTrack: 'rgba(178, 251, 253, 0.2)',
        BarThumb: 'rgba(178, 251, 253, 1)',
        BarHover: '#367EF2',
    }

    const { runAsync: getSecurityGetSecurityByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = list.flatMap(({ uuid, tableName, totalCount, handledCount }) => [
                { name: '下单数', uuid, type: tableName, value: totalCount },
                { name: '已整改', uuid, type: tableName, value: handledCount },
            ])
            setData(data)
        },
    })

    const click = e => {
        setOptionsCall({
            type: 'TableList',
            data: { title: '安全巡检列表', type: 'SecondaryInspectionTemplate', OrganizationUuid: e.uuid },
        })
    }

    useEffect(() => {
        getSecurityGetSecurityByOrg({ url: 'getSecurityGetSecurityByOrg' })
    }, [getSecurityGetSecurityByOrg])

    return (
        <div className="SecurityWorkArea001">
            <div className="TitleSmall">
                <div>按标段统计</div>
                <div />
            </div>
            <div className="Charts" ref={ChartsBox}>
                {size && Data && <ColumnConfigA01Template data={Data} size={size} style={style} click={click} />}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const SecurityWorkAreaA01 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Data, setData] = useState([])
    const [OptionsCall, setOptionsCall] = useState()

    const style = {
        ColumnColor:
            'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
        ColumnWidth: 16,
        ColumnLegend: false,
        LegendPossion: 'top',
        LegendoffsetY: 10,
        Legendfill: '#B2FBFD',
        LegendfontSize: 12,
        XLine: '#B2FBFD',
        XLabel: '#B2FBFD',
        XTick: '#B2FBFD',
        YTitle: '数量',
        YTColor: '#B2FBFD',
        YPosi: 'end',
        YAuto: true,
        YOffset: 50,
        YColoc: '#B2FBFD',
        YNumber: 5,
        YGrid: 'rgba(155, 253, 255, 0.35)',
        BarStatus: false,
        BarHeight: 8,
        BarWidth: 80,
        BarTrack: 'rgba(178, 251, 253, 0.2)',
        BarThumb: 'rgba(178, 251, 253, 1)',
        BarHover: '#367EF2',
    }

    const { runAsync: getSecurityGetSecurityByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = list.flatMap(({ uuid, tableName, totalCount, handledCount }) => [
                { name: '下单数', uuid, type: tableName, value: totalCount },
                { name: '已整改', uuid, type: tableName, value: handledCount },
            ])
            setData(data)
        },
    })

    const click = e => {
        setOptionsCall({
            type: 'TableList',
            data: { title: '安全巡检列表', type: 'SecondaryInspectionTemplate', OrganizationUuid: e.uuid },
        })
    }

    useEffect(() => {
        getSecurityGetSecurityByOrg({ url: 'getSecurityGetSecurityByOrg' })
    }, [getSecurityGetSecurityByOrg])

    return (
        <div className="SecurityWorkArea001">
            <div className="Charts" style={{ height: '100%' }} ref={ChartsBox}>
                {size && Data && <ColumnConfigA01Template data={Data} size={size} style={style} click={click} />}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
